<template>
  <div class="teacher-layout-container">
    <el-container class="main-container">
      <TeacherHeader />
      <el-container>
        <el-aside width="200px" class="sidebar">
          <el-menu :default-openeds="['1', '2', '3']" router>
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <EditPen />
                </el-icon>
                <span>题库管理</span>
              </template>
              <el-menu-item index="/teacher/question/list">题目列表</el-menu-item>
              <el-menu-item index="/teacher/question/add">添加题目</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <Document />
                </el-icon>
                <span>考试管理</span>
              </template>
              <el-menu-item index="/teacher/exam/list">考试列表</el-menu-item>
              <el-menu-item index="/teacher/exam/add">创建考试</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <DataAnalysis />
                </el-icon>
                <span>成绩管理</span>
              </template>
              <el-menu-item index="/teacher/score/query">成绩查询</el-menu-item>
              <el-menu-item index="/teacher/score/correct">手动批改</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <div class="content">
            <slot></slot>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import TeacherHeader from './TeacherHeader.vue'
import { EditPen, Document, DataAnalysis } from '@element-plus/icons-vue'
</script>

<style scoped>
.teacher-layout-container {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
}

.main-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sidebar {
  background-color: #fee;
  overflow-y: auto;
}

.el-menu {
  background-color: #fee;
  border-right: none;
}

.el-menu-item {
  color: #333;
}

.el-menu-item:hover {
  background-color: #fcc;
  color: #333;
}

.el-menu-item.is-active {
  background-color: #fcc;
  color: #333;
}

.el-sub-menu__title {
  color: #333;
}

.el-sub-menu__title:hover {
  background-color: #fcc;
  color: #333;
}

/* 确保二级菜单背景色和字体颜色正确 */
.el-sub-menu .el-menu {
  background-color: #fdd;
}

.el-sub-menu .el-menu-item {
  color: #333;
}

.content {
  padding: 20px;
  background-color: #f5f7fa;
  height: 100%;
  overflow-y: auto;
}
</style>